<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="css/xiaomidenglustyle.css">
    <link rel="stylesheet" href="iconfont/3/iconfont.css">
</head>

<body>
    <div id="root">
        <div class="left-img">
            <img src="imgs/banner.92c693b4..jpg" alt="">
        </div>
        <div class="right-content">
            <div class="right-header">
                <div class="right-logo">
                    <img src="imgs/logo-mi2.png" alt="">
                    <p>小米账号</p>
                </div>
                <div class="right-text">
                    <p><a href="">中文(简体)</a></p>
                    <p>|</p>
                    <p><a href="">帮助中心</a></p>
                    <p><a href="">隐私协议</a></p>
                    <p><a href="">用户协议</a></p>
                </div>
            </div>
            <div class="zhanghao">
                <div class="zhanghao-content">
                    <!-- <span class="iconfont icon-erweima"></span> -->
                    <div class="tab-list">
                        <ul>
                            <li @click="dl(true),cur=0" :class="{active:cur==0}" class="denglu">登录</li>
                            <li @click="dl(flase),cur=1" :class="{active:cur==1}" class="zhuce">注册</li>
                        </ul>
                    </div>
                    <div class="tab-con">
                        <div class="item1" v-if="temp">
                            <form action="">
                                <p><input type="text" placeholder="邮箱/手机号码/小米ID" class="put"></p>
                                <p><input type="password" placeholder="密码" class="put"></p>
                                <p>
                                    <input type="checkbox" v-model="checked">
                                    <span>我已阅读同意小米账号<a href="#">用户协议</a>和<a href="#">隐私政策</a></span>
                                </p>
                                <p><input type="submit" value="登录" class="submit"></p>
                            </form>
                            <div class="box1">
                                <p class="box1-left"><a href="#">忘记密码</a> </p>
                                <p class="box1-right"><a href="#">手机号登录</a> </p>
                            </div>
                            <div class="box2">
                                <div class="other" style="text-align: center;">其他方式？</div>
                                <div class="other-con">
                                    <ul>
                                        <li class="iconfont icon-zhifubao"></li>
                                        <li class="iconfont icon-weixin"></li>
                                        <li class="iconfont icon-QQ"></li>
                                        <li class="iconfont icon-weibo"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                            <div class="item2" v-if="!temp">
                                <form action="">
                                    <span>国家/地区</span>
                                    <select>
                                        <option value="中国">中国</option>
                                        <option value="美洲">美洲</option>
                                        <option value="欧洲">欧洲</option>
                                        <option value="非洲">非洲</option>
                                    </select>
                                    <p><input type="number" placeholder="手机号" class="put"></p>
                                    <p><input type="number" placeholder="请输入验证码" class="put" style="width: 220px; float: left;border-radius: 4px 0 0 4px;">
                                        <a href="" class="yanzhengma">获取验证码</a>
                                    </p>
                                    <p>
                                        <input type="checkbox" v-model="checked">
                                        <span>我已阅读同意小米账号<a href="#">用户协议</a>和<a href="#">隐私政策</a></span>
                                    </p>
                                    <p><input type="submit" value="注册" class="submit"></p>
                                </form>
                                <div class="box1">
                                    <p class="box1-left"><a href="#">收不到验证码？</a></p>
                                </div>
                                <div class="box2">
                                    <div class="other">其他方式？</div>
                                    <div class="other-con">
                                        <ul>
                                            <li class="iconfont icon-zhifubao"></li>
                                            <li class="iconfont icon-weixin"></li>
                                            <li class="iconfont icon-QQ"></li>
                                            <li class="iconfont icon-weibo"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            const app = Vue.createApp({
                data() {
                    return {
                        temp: true,
                        checked: false,
                    }
                },
                methods: {
                    dl: function (t) {
                        console.log(t);
                        this.temp = t;
                    }
                }
            });
            const vm = app.mount("#root");
        </script>
</body>

</html>